<template>
  <div class="block">
    <el-carousel trigger="click" height="300px">
      <el-carousel-item v-for="item in images" :key="item.id">
        <router-link  :to="item.tab">
            <img :src="item.src" :alt="item.alt" class="slide_img">
        </router-link>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>

export default {
    data(){
        return {
            images:[
                {
                    id: '0001',       //图片ID
                    alt: "前端技术",  //图片alt
                    src: require('../assets/lb01.png'),//引入图片地址
                    tab: '/about'     //轮播图指向模块
                },{
                    id: '0002',
                    alt: "WEB2.0时代",
                    src: require('../assets/lb02.png'),
                    tab: '/about'
                },{
                    id: '0003',
                    alt: "编程人员",
                    src: require('../assets/lb04.jpg'),
                    tab: '/about'
                },{
                    id: '0004',
                    alt: "大数据时代",
                    src: require('../assets/lb03.jpg'),
                    tab: '/about'
                }
            ]
        }
    }
}
</script>

<style>
.block{
    margin: 3px;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
.el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
.el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
</style>